<template>
  <div>
    <Loading v-show="LOADING"></Loading>
    <nav-com title="数据统计" :showView="showView" @back="backHandler()"></nav-com>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div>
        <van-tabs @click="switchActive" color="#FF6B35" title-active-color="#FF6B35" title-inactive-color="#000000"
          v-model="active">
          <van-tab v-for="(item, index) in tabList" :key="index" :title="item">
            <!-- 分公司分账 -->
            <div v-if="active == 0 && tabList.length == 2">
              <div class="box" style="
                  display: flex;
                  align-items: center;
                  justify-content: flex-start;
                  flex-wrap: wrap;
                ">
                <div style="width: 33%; text-align: center">
                  <div class="num">{{ dataList.month_kpi }}</div>
                  <div class="title">本月业绩</div>
                </div>
                <span class="split"></span>
                <div style="width: 33%; text-align: center">
                  <div class="num">{{ dataList.yes_kpi }}</div>
                  <div class="title">昨日业绩</div>
                </div>
                <span class="split"></span>
                <div style="width: 33%; text-align: center">
                  <div class="num">{{ dataList.today_kpi }}</div>
                  <div class="title">本日业绩</div>
                </div>
                <div style="width: 33%; text-align: center">
                  <div class="num">{{ dataList.month_sub_account }}</div>
                  <div class="title">本月分账</div>
                </div>
                <span class="split"></span>
                <div style="width: 33%; text-align: center">
                  <div class="num">{{ dataList.yes_sub_account }}</div>
                  <div class="title">昨日分账</div>
                </div>
                <span class="split"></span>
                <div style="width: 33%; text-align: center">
                  <div class="num">{{ dataList.today_sub_account }}</div>
                  <div class="title" style="font-size: 16px; font-weight: 600">
                    本日分账
                  </div>
                </div>
              </div>
              <div class="box" style="line-height: 30px">本日分账明细</div>
              <div class="box">
                <div style="
                    margin: 20px 10px;
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                  ">
                  <!-- type : 5=品牌专区 2=易购臻品 1=每月一品 -->
                  <div @click="switchActiveType(5)" :class="activeType == 5 ? 'active' : ''" style="">
                    品牌专区
                  </div>
                  <span class="split" style="height: 15px"></span>
                  <div @click="switchActiveType(2)" :class="activeType == 2 ? 'active' : ''">
                    易购甄选
                  </div>
                  <span class="split" style="height: 15px"></span>
                  <div @click="switchActiveType(1)" :class="activeType == 1 ? 'active' : ''">
                    每月一品
                  </div>
                </div>
                <div class="box-block">
                  <div>总业绩:{{ dataList.all_account }}</div>
                  <div>订单数:{{ dataList.all_order }}</div>
                </div>
                <div>
                  <div class="box-warp">
                    <div class="box-title">
                      {{ dataList.sub_list.name }} {{ dataList.sub_list.amount }}
                    </div>
                    <div class="box-item" v-for="(item, index) in dataList.sub_list.list" :key="index">
                      <div>{{ item.name }} {{ item.amount }}</div>
                      <div>{{ item.ti_amount }} (提) +{{ item.yu_amount }} (余)</div>
                    </div>
                  </div>
                  <div class="box-warp">
                    <div class="box-title">
                      {{ dataList.sub_list.name1 }}
                      {{ dataList.sub_list.amount1 }}
                    </div>
                    <div class="box-item" v-for="(item, index) in dataList.sub_list.list1" :key="index">
                      <div>{{ item.name }} {{ item.amount }}</div>
                      <div>{{ item.ti_amount }} (提) +{{ item.yu_amount }} (余)</div>
                    </div>
                  </div>
                  <div class="box-warp">
                    <div class="box-title">
                      {{ dataList.sub_list.name2 }}
                      {{ dataList.sub_list.amount2 }}
                    </div>
                    <div class="box-item" v-for="(item, index) in dataList.sub_list.list2" :key="index">
                      <div>{{ item.name }} {{ item.amount }}</div>
                      <div>{{ item.ti_amount }} (提) +{{ item.yu_amount }} (余)</div>
                    </div>

                  </div>
                </div>
              </div>
            </div>
            <!-- 分公司分账 -->
            <!-- 分享统计 -->
            <div v-else>
              <div class="option-list">
                <div @click="shareOptionEvent(0)" class="shareOption" :style="operType == 2?'padding:10px 14vw':''"
                  :class="shareOptionActive == 0 ? 'shareOptionActive' : ''">分享人数</div>
                <div v-if="operType == 1" @click="shareOptionEvent(1)" class="shareOption"
                  :class="shareOptionActive == 1 ? 'shareOptionActive' : ''">独立负责人排行榜</div>
                <div @click="shareOptionEvent(2)" class="shareOption" :style="operType == 2?'padding:10px 14vw':''"
                  :class="shareOptionActive == 2 ? 'shareOptionActive' : ''">业绩排行榜</div>
              </div>
              <!-- 分享人数 -->
              <div v-if="shareOptionActive == 0">
                <div class="box" style="
                  display: flex;
                  align-items: center;
                  justify-content: flex-start;
                  flex-wrap: wrap;
                ">
                  <div style="width: 33%; text-align: center">
                    <div class="num">{{ scTemaData.user_price }}</div>
                    <div class="title">总余额</div>
                  </div>
                  <span class="split"></span>
                  <div style="width: 33%; text-align: center">
                    <div class="num">{{ scTemaData.user_score }}</div>
                    <div class="title">总积分</div>
                  </div>
                  <span class="split"></span>
                  <div style="width: 33%; text-align: center">
                    <div class="num">{{ scTemaData.user_sum }}</div>
                    <div class="title">总分享人数</div>
                  </div>
                </div>
                <div class="box">
                  <div style="
                      font-size: 10px;
                      color: rgba(135, 33, 24, 1);
                      margin: 10px 0;
                      overflow: scroll;
                      padding-top: 0;
                    ">
                    <div style="
                        display: flex;
                        justify-content: space-around;
                        border-bottom: 1px solid #e7e7e7;
                        line-height: 45px;
                        font-size: 14px;
                        color: #000000;
                        font-weight: bold;
                      ">
                      <div style="min-width: 30%; text-align: center">角色</div>
                      <div style="min-width: 20%; text-align: center">人数</div>
                      <div style="min-width: 25%; text-align: center">余额</div>
                      <div style="min-width: 25%; text-align: center">积分</div>
                    </div>
                    <div v-for="(item, index) in scTemaData.re_list" :key="index" class="re_list">
                      <div style="
                          width: 30%;
                          text-align: center;
                          white-space: nowrap;
                          overflow:hidden;
                        ">
                        {{ item.role_name ? item.role_name : "" }}
                      </div>
                      <div style="min-width: 20%; text-align: center">
                        {{ item.user_sum }}
                      </div>
                      <div class="item">
                        {{ item.user_price }}
                      </div>
                      <div class="item">
                        {{ item.user_score }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 分享人数 -->
              <div class="box" v-if="shareOptionActive == 1">
                <!-- 独立负责人排行榜 -->
                <div class="dlfzr-select">
                  <div class="select-btn" @click="sepIncomeRankTypeShow = true">
                    <div>{{ xzlx }}</div>
                    <div class="arrow-bottom">
                      <van-icon name="play" />
                    </div>
                  </div>
                  <div class="select-btn" @click="timeTypeShow = true">
                    <div>{{ xzsj }}</div>
                    <div class="arrow-bottom">
                      <van-icon name="play" />
                    </div>
                  </div>
                </div>
                <div class="dlfzr-titel">
                  <span>独立负责人</span>
                  <span v-if="sepIncomeRankType == 0">统计(人数)</span>
                  <span v-if="sepIncomeRankType == 1">统计(业绩)</span>
                  <span v-if="sepIncomeRankType == 2">统计(单数)</span>
                </div>
                <div class="rank-list">
                  <!-- 排行榜 -->
                  <div v-for="sepIncomeRank in sepIncomeRankList" class="rank-item">
                    <!-- 单条数据 -->
                    <div>({{ sepIncomeRank.nickname }})</div>
                    <div class="item-2">
                      <div style="padding-right: 5px;">{{ sepIncomeRank.mobile }}</div>
                      <div style="width: 70vw;display: flex;align-items: center;">
                        <div style="width: 100%;">
                          <div class="item-chart" :style="{ width: sepIncomeRank.percent+ '%' }"></div>
                        </div>
                        <div style="margin-left: 15px;" v-if="sepIncomeRankType == 0">{{ sepIncomeRank.count }}</div>
                        <div style="margin-left: 15px;" v-if="sepIncomeRankType == 1">{{ sepIncomeRank.order_money }}
                        </div>
                        <div style="margin-left: 15px;" v-if="sepIncomeRankType == 2">{{ sepIncomeRank.order_num }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div><!-- 独立负责人排行榜 -->
              <div class="box" v-if="shareOptionActive == 2">
                <!-- 业绩排行榜 -->
                <div class="dlfzr-select">
                  <div class="select-btn" style="width: 29vw;" @click="sepIncomeRankRoleShow= true">
                    <div>{{ xzjs }}</div>
                    <div class="arrow-bottom">
                      <van-icon name="play" />
                    </div>
                  </div>
                  <div class="select-btn" style="width: 29vw;"  @click="sepIncomeRankTypeShow = true">
                    <div>{{ xzlx }}</div>
                    <div class="arrow-bottom">
                      <van-icon name="play" />
                    </div>
                  </div>
                  <div class="select-btn" style="width: 29vw;"  @click="timeTypeShow = true">
                    <div>{{ xzsj }}</div>
                    <div class="arrow-bottom">
                      <van-icon name="play" />
                    </div>
                  </div>
                </div>
                <div class="dlfzr-titel">
                  <div style="width: 30vw; display: flex;justify-content: space-between;">
                    <span>姓名</span>
                    <span>手机号</span>
                  </div>
                  <span v-if="sepIncomeRankType == 0">统计(人数)</span>
                  <span v-if="sepIncomeRankType == 1">统计(业绩)</span>
                  <span v-if="sepIncomeRankType == 2">统计(单数)</span>
                </div>
                <div class="rank-list">
                  <!-- 排行榜 -->
                  <div v-for="sepIncomeRank2 in sepIncomeRankList2" class="rank-item"
                    style="display: flex;align-items: center;">
                    <!-- 单条数据 -->
                    <div style="width: 40vw; display: flex;justify-content: space-between; white-space: nowrap;padding-right: 5px;">
                      <div style="max-width: 50px;overflow: hidden;text-overflow: ellipsis;">{{sepIncomeRank2.nickname}}</div>
                      <div>{{sepIncomeRank2.mobile | mobileFilter}}</div>
                    </div>
                    
                    <div class="item-2">
                      <div style="width: 50vw;display: flex;align-items: center;">
                        <div style="width: 100%;">
                          <div class="item-chart" :style="{ width: sepIncomeRank2.percent+ '%' }"></div>
                        </div>
                        <div style="margin-left: 15px;" v-if="sepIncomeRankType == 0">{{ sepIncomeRank2.count }}</div>
                        <div style="margin-left: 15px;" v-if="sepIncomeRankType == 1">{{ sepIncomeRank2.order_money }}
                        </div>
                        <div style="margin-left: 15px;" v-if="sepIncomeRankType == 2">{{ sepIncomeRank2.order_num }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div><!-- 业绩排行榜 -->
            </div>
            <!-- 分享统计 -->
          </van-tab>
        </van-tabs>
      </div>
    </van-pull-refresh>
    <van-popup v-model="sepIncomeRankTypeShow" position="bottom">
      <van-picker show-toolbar :columns="sepIncomeRankTypeList" @confirm="sepIncomeRankTypeConfirm"
        @cancel="sepIncomeRankTypeShow = false">
      </van-picker>
    </van-popup>

    <van-popup v-model="sepIncomeRankRoleShow" position="bottom">
      <van-picker show-toolbar :columns="rolesList" value-key="name"	 @confirm="sepIncomeRankRoleConfirm"
        @cancel="sepIncomeRankRoleShow = false">
      </van-picker>
    </van-popup>

    <van-popup v-model="timeTypeShow" position="bottom">
      <van-picker show-toolbar :columns="timeTypeList" value-key="name"	 @confirm="timeTypeConfirm"
        @cancel="timeTypeShow = false">
      </van-picker>
    </van-popup>

    <!-- 自定义选择时间 -->
    <van-calendar v-model="showTimeCheck" :color="color" :min-date="minDate"  type="range" @confirm="timeCheckConfirm" />
    <!-- 自定义选择时间 -->

  </div>
</template>

<script>
import moment from "moment";
import {
  getSellProfit,
  getSellProfitList,
  getProfitStatistics,
  ListIncome,
  extIncome,
  getTeamsfee,
  scTemaData,
  getuserInfo,
  getSepIncomeRank,
  getSepIncomeRank2,
  getRoleList
} from "@/api/api";
import navCom from "@/component/nav";
import Loading from "@/component/loading";
import {
  RadioGroup,
  Radio,
  Field,
  CellGroup,
  Picker,
  Icon,
  Toast,
  Pagination,
  Calendar,
} from "vant";
export default {
  components: {
    navCom,
    Loading,
  },
  data() {
    return {
      isVisible:true,
      xzlx: "选择类型",
      xzsj: "选择时间",
      xzjs: "选择角色",
      shareOptionActive: 0,
      active: 0,
      activeType: 5,
      tabList: [],
      showView: true,
      isLoading: false,
      LOADING: false,
      allInfo: {},
      dataList: {},
      scTemaData: {
        re_list: [],
      },
      dataInfo: {},
      sepIncomeRankList: [],
      sepIncomeRankList2:[],
      sepIncomeRankTypeList: ['业绩', '单数'],
      sepIncomeRankType: 1,
      sepIncomeRankTypeShow: false,
      sepIncomeRankRoleShow: false,
      rolesList:[],
      role:"",
      timeTypeList: [
        {
          id:1,
          name:"今日"
       },  {
          id:2,
          name:"本周"
       },  {
          id:3,
          name:"本月"
       },  {
          id:4,
          name:"本季度"
       },  {
          id:5,
          name:"本年度"
       },  {
          id:6,
          name:"时间自选"
       },
     ],
      color:"#ff6b35",
      minDate: new Date(2022, 0, 1),
      // maxDate: new Date(2010, 0, 31),
      timeType:"",
      timeTypeShow:false,
      showTimeCheck:false,
      start_time:"",
      end_time:""
    };
  },
  filters: {
    mobileFilter(val) {
      if (val == "" || val == undefined) {
        return "无";
      }
      let tell = /(\d{3})\d*(\d{4})/;
      let num = val.replace(tell, "$1****$2");

      return num;
    },
    roleFilter(val) {
      let roleName = {
        1: "推广员",
        2: "代言人",
        3: "一星网店经销商",
        4: "二星网店经销商",
        5: "银牌经销商",
        6: "金牌经销商",
        7: "钻石经销商",
      };
      return roleName[val];
    },
  },
  created() {
    this.init();
    this.operType = this.$route.params.operType;
    console.log("operType",this.operType);
    // this.operType=0
    // if(this.operType==1){
    //   this.type=1;
    // }else{
    //   this.userForm.type=2;
    // }
  },
  methods: {
    init() {
      getuserInfo().then((res) => {
        console.log("getuserInfo", res);
        if (res.data.code == 1) {
          this.shareUser = res.data.data;
          if (this.shareUser.is_leader == 1&&this.operType==1) {
            this.tabList = ["分公司分账", "分享统计"];
            this.getTeamsfee();
          } else if (this.shareUser.is_sep_income == 1) {
            this.tabList = ["分享统计"];
            this.getScTemaData();
          }
        }
      });
      getRoleList().then((res) => {
        console.log("getRoleList", res);
        if (res.data.code == 1) {
          this.rolesList=res.data.data;
        }
      });
      
    },
    getScTemaData() {
      this.LOADING = true;
      scTemaData({
        type: this.operType,
      }).then((res) => {
        this.LOADING = false;
        console.log("scTemaData", res);
        this.LOADING = false;
        if (res.data.code == 1) {
          this.showAllShare = true;
          this.scTemaData = res.data.data;
        } else {
          Toast(res.data.msg);
        }
      });
    },

    getTeamsfee() {
      getTeamsfee({
        type: this.activeType,
      })
        .then((result) => {
          console.log("getTeamsfee", result);
          if (result.data.code == 1) {
            this.dataList = {};
            this.dataList = result.data.data;
            console.log(this.dataList);
          } else {
            Toast(result.data.msg);
          }
        })
        .catch((err) => { });
    },
    getSepIncomeRank() {
      getSepIncomeRank({
        type: this.sepIncomeRankType,
        timeType:this.timeType,
        start_time:this.start_time,
        end_time:this.end_time
      })
        .then((result) => {
          console.log("getSepIncomeRank", result);
          if (result.data.code == 1) {
            this.sepIncomeRankList = result.data.data;
            console.log(this.dataList);
          } else {
            Toast(result.data.msg);
          }
        })
        .catch((err) => { });
    },
    getSepIncomeRank2() {
      getSepIncomeRank2({
         type: this.sepIncomeRankType,
         role:this.role,
         timeType:this.timeType,
         start_time:this.start_time,
         end_time:this.end_time,
         operType: this.operType,
      })
        .then((result) => {
          console.log("getSepIncomeRank2", result);
          if (result.data.code == 1) {
            this.sepIncomeRankList2 = result.data.data;
            console.log(this.dataList);
          } else {
            Toast(result.data.msg);
          }
        })
        .catch((err) => { });
    },

    switchActiveType(type) {
      this.activeType = type;
      this.getTeamsfee();
    },
    switchActive(active) {
      if (active == 0 && this.shareUser.is_leader == 1) {
        this.getTeamsfee();
      } else {
        this.getScTemaData();
      }
    },
    shareOptionEvent(active) {//分享统计选项
      if (active == 0) {
        this.shareOptionActive = active;
        this.getScTemaData();
      } else if (active == 1) {
        this.xzlx= "选择类型";//初始化数据
        this.xzsj= "选择时间";
        this.xzjs= "选择角色";
        this.role="";
        this.timeType="";
        this.sepIncomeRankType=1;

        this.shareOptionActive = active;
        this.getSepIncomeRank();
      } else if (active == 2) {
        this.xzlx= "选择类型";//初始化数据
        this.xzsj= "选择时间";
        this.xzjs= "选择角色";
        this.role="";
        this.timeType="";
        this.sepIncomeRankType=1;

        this.shareOptionActive = active;
        this.getSepIncomeRank2();
      }
    },






    sepIncomeRankTypeConfirm(event) {
      console.log("sepIncomeRankTypeConfirm", event);
      console.log("sepIncomeRankTypeConfirm", this.sepIncomeRankTypeList.indexOf(event) + 1);

      this.xzlx= event;
      this.sepIncomeRankType = this.sepIncomeRankTypeList.indexOf(event)+ 1;
      if(this.shareOptionActive == 1){
        this.getSepIncomeRank();
      }else if(this.shareOptionActive == 2){
        this.getSepIncomeRank2();
      }
      this.sepIncomeRankTypeShow = false;
    },

    sepIncomeRankRoleConfirm(event) {
      console.log("sepIncomeRankRoleConfirm", event);
      this.xzjs= event.name;
      this.role = event.id;
      this.getSepIncomeRank2();
      this.sepIncomeRankRoleShow = false;
    },

    timeTypeConfirm(event){
      console.log("timeTypeConfirm", event);
      this.xzsj= event.name;

      this.timeType = event.id;

      if(this.shareOptionActive == 1){
        this.getSepIncomeRank();
      }else if(this.shareOptionActive == 2){
        this.getSepIncomeRank2();
      }

      this.timeTypeShow = false;
      if(this.timeType == 6){
        this.showTimeCheck = true; 
      }else{
        if(this.shareOptionActive == 1){
              this.getSepIncomeRank();
        }else if(this.shareOptionActive == 2){
              this.getSepIncomeRank2();
        }
      }
    },
    

    timeCheckConfirm(event){
      console.log("timeCheckConfirm", event);
      this.showTimeCheck = false; 
      this.start_time=moment(event[0]).format("YYYY-MM-DD");
      this.end_time=moment(event[1]).format("YYYY-MM-DD");
      console.log("timeCheckConfirm",  this.start_time);
      console.log("timeCheckConfirm",  this.end_time);
      if(this.shareOptionActive == 1){
        this.getSepIncomeRank();
      }else if(this.shareOptionActive == 2){
        this.getSepIncomeRank2();
      }
    },

   




    //返回
    backHandler() {
      this.$router.go(-1);
    },
    onRefresh() {
      this.isLoading = false;
    },
  },
};
</script>
<style>
body {
  background-color: #f2f3f7;
}
</style>
<style scoped>
/deep/.back_box {
  border-bottom: 1px solid #eeeeee;
}

.box {
  background-color: #fff;
  border-radius: 10px;
  padding: 10px;
  margin: 10px;
}

.box-block {
  border-radius: 2px;
  font-size: 14px;
  color: #222222;
  line-height: 40px;
  background-color: #f8f8f8;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.box-warp {
  background: #FBFBFB;
  border-radius: 4px;
  padding: 10px;
  margin: 10px 0;
}

.box-warp .box-title {
  font-size: 15px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 550;
  color: #000000;
  line-height: 21px;
}

.box-item {
  font-size: 14px;
  color: #666666;
  line-height: 30px;
  border-bottom: 1px solid #e7e7e7;
  padding: 10px 0;
}

.btn2 {
  width: 15%;
  text-align: center;
  background: #fe4b20;
  opacity: 0.3;
  padding: 7px 0;
  line-height: 15px;
  border-radius: 8px;
  color: #fff;
  font-weight: 500;
}

.btn1 {
  width: 15%;
  text-align: center;
  background-color: rgb(254, 75, 32);
  padding: 7px 0;
  line-height: 15px;
  border-radius: 8px;
  color: #fff;
  font-weight: 500;
}

.num {
  color: #ff6b35;
  font-size: 18px;
  font-weight: 500;
  line-height: 30px;
  margin-top: 10px;
}

.active {
  color: #ff6b35;
}

.title {
  color: #000000;
  font-size: 15px;
  font-weight: 500;
  line-height: 30px;
  margin-bottom: 10px;
}

.split {
  width: 1px;
  height: 20px;
  background: #d1d2d5;
}

.item {
  min-width: 25%;
  text-align: center;
  font-size: 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.re_list {
  font-size: 10px;
  display: flex;
  justify-content: space-around;
  border-bottom: 1px solid E7E7E7;
  line-height: 45px;
  font-size: 10px;
  color: #666666;
  border-bottom: 1px solid rgb(231, 231, 231);
}

.option-list {
  display: flex;
  background: #fff;
  margin: 10px 0;
}

.option-list {
  display: flex;
  background: #fff;
  margin: 10px 0;
  padding: 10px;
  justify-content: space-between;
}

.shareOption {
  background: #F1F1F1;
  padding: 10px 15px;
  color: #000000;
  border-radius: 5px;
  font-size: 4vw;
}

.shareOptionActive {
  background-color: #FF6B35;
  color: #FFFFFF;
}

.dlfzr-select {
  display: flex;
  justify-content: space-between;
}

.select-btn {
  display: flex;
  justify-content: space-around;
  background-color: #F1F1F1;
  padding: 10px 0px;
  border-radius: 5px;
  width: 44vw;
}

.arrow-bottom {
  transform: rotate(90deg);
}

.dlfzr-titel {
  display: flex;
  justify-content: space-between;
  line-height: 50px;
  color: #000000;
  font-weight: 550;
  padding: 0 5px;
}

.rank-list {
  padding: 0 5px;
}

.rank-item {
  color: #666666;
  font-size: 14px;
  line-height: 20px;
  padding: 5px 0;
}

.item-2 {
  display: flex;
  align-items: center;
}

.item-chart {
  height: 10px;
  background-color: #5EC6FF;
  width: 50vw;
  /* margin: 0 10px; */
}
</style>
